<template>
 <div class="homeCount">
  <!-- <shuffling></shuffling> -->
   <el-input
   type="textarea"
   :autosize="{ minRows: 2, maxRows: 6}"
   placeholder="请输入内容"
   v-model="textarea2">
   </el-input>
   <el-button type="success" @click="reset" :disabled="this.textarea2 == ''">重置</el-button>
   <el-button type="success" @click="generate" :disabled="this.textarea2 == ''">提交</el-button>
   <div 
   v-loading="this.loading" 
   element-loading-text="加载中"
   class="titleList" 
   element-loading-background="rgba(0, 0, 0, 0.3)">
      <!-- <li v-if="i<3">标题{{i+1}}：{{item}}</li>
      <li v-else>总结：{{item}}</li> -->
      <li class="frist">标题1：<span v-show="this.textarea2">{{this.title[0].title1}}</span></li>
      <li>标题2：<span v-show="this.textarea2">{{this.title[1].title2}}</span></li>
      <li>标题3：<span v-show="this.textarea2">{{this.title[2].title3}}</span></li>
      <li>总结：<span v-show="this.textarea2">{{this.title[3].summarize}}</span></li>
   </div>
   <div class="history" v-show="this.history">
      <div class="history_title" v-show="this.history">历史记录</div>
      <el-collapse accordion v-for="(item,i) in (this.history).reverse()" :key="i">
         <el-collapse-item :title="item.content" name="i" v-if="i<10">
            <div class="item_title">标题：{{(item.title).replace(/[^\u4E00-\u9FA5]/g,'')}}</div>
            <div class="item_summary">总结：{{(item.summary).replace(/[^\u4E00-\u9FA5]/g,'')}}</div>
            <div class="item_time">{{item.creatTime.slice(0,10)}} {{item.creatTime.slice(12,19)}}</div>
         </el-collapse-item>
      </el-collapse> 
   </div>
 </div>
</template>

<script>
import shuffling from '@/components/shuffling/shuffling.vue'
import api from '@/api/mainservice_index.js'
import { mapMutations, mapState } from 'vuex'
// import { Loading } from 'element-ui';
 export default {
  name: '' ,
  components:{
     shuffling,
  },
 data () {
 return {
   textarea2:'',
   loading:false,
   title:[
      {
         title1:''
      },
      {
         title2:''
      },
      {
         title3:''
      },
      {
         summarize:''
      },
   ],
   history:[],
   
  }
 },
 computed:{
   ...mapState('moduleUser',['user']),
   
 },
 mounted(){
   this.getHistotyCommit()
   this.reverseHistory()
 },
 methods:{
   ...mapMutations('moduleUser',['updateCount']),
   generate(){
      this.loading = true
      if(this.user.count){
         api.generate(this.textarea2).then((res) => {
            console.log(res)
            if(res.data.code == 200) {
               this.loading = false
               this.title = res.data.obj
                
            }
            this.updateCount()
         })   
      }else{
         this.$alert('试试获取积分兑换吧~','次数不够了',{
          confirmButtonText: '确定',
        })
      }
   },
   reset(){
      this.textarea2 = ''
      this.title = [{title1:''},{title2:''},{title3:''},{summarize:''}]
   },
   getHistotyCommit(){
      api.historyCommit().then((res) => {
         console.log(res)
         if(res.data.code == 200){
            this.history = res.data.obj
         }
      }).catch(error => {
         console.log(error)
      })
   },
   reverseHistory() {
      this.history = this.history.reverse()
   }
 }
}

</script>
<style scope lang="less">
   .homeCount{
      width: 65%;
      .el-textarea{
         margin-top: 60px;
      }
      .el-button {
         margin-top: 30px;
         margin-right: 20px;
      }
      .titleList{
         margin-top: 40px;
         padding: 20px;
         text-align: left;
         background-color: #fff;
         border-radius: 15px;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         li{
            list-style: none;
            margin-top: 30px;
         }
         .frist{
            margin-top: 0px;
         }
      }
      .history{
         margin-top: 30px;
         text-align: left;
         .history_title{
            height: 40px;
            line-height: 40px;
            background-color: #B3E19D;
            color: #fff;
            padding-left: 10px;
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
         }
         .el-collapse-item{
           .el-collapse-item__header{
            padding-left: 10px;
            font-size: 13px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient: vertical;
           }
           .el-collapse-item__content{
            padding-left: 10px;
            .item_title, .item_summary{
               margin-bottom: 5px;
               color: #666;
            }
            .item_time{
               color: #d6d6d6;
            }
           }
         }
      }
   }
</style>